<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
			.error {
				color: red;
			}
			.success {
				color: green;
			}
		</style>
	</head>
	<script type="text/javascript">
		function check() {
			let username = document.getElementById("username").value;
			let password = document.getElementById("password").value;
			let confirmPassword = document.getElementById("confirmPassword").value;
			let age = document.getElementById("age").value;
			let mobilephone = document.getElementById("mobilephone").value;
			let errors = [];
			if (username == "") {
				document.getElementById("span1").innerHTML = "姓名不能为空";
				return false;
			} else if (username.length > 10) {
				document.getElementById("span1").innerHTML = "姓名不能超过10位";
				return false;
			} else {
				document.getElementById("span1").innerHTML = "<img src='js/img/ok.png' alt='OK' style='width:20px;'>";
			}
			
			if (password == "") {
				document.getElementById("span2").innerHTML = "密码不能为空";
				return false;
			} else if (password.length < 6) {
				document.getElementById("span2").innerHTML = "密码不能少于6位";
				return false;
			} else {
				document.getElementById("span2").innerHTML = "<img src='js/img/ok.png' alt='OK' style='width:20px;'>";
			}
			if (confirmPassword != password) {
				document.getElementById("span3").innerHTML = "两次密码不一致";
				return false;
			} else {
				document.getElementById("span3").innerHTML = "<img src='js/img/ok.png' alt='OK' style='width:20px;'>";
			}
			if (isNaN(age) || age < 1 || age > 150) {
				document.getElementById("span4").innerHTML = "年龄应该是1-150的数字";
				return false;
			} else {
				document.getElementById("span4").innerHTML = "<img src='js/img/ok.png' alt='OK' style='width:20px;'>";
			}
			if (mobilephone == "") {
				span4.innerHTML = "手机号不能为空";
				return false;
			} else if ( !/^1[0-9]{10}$/.test(mobilephone)) {
				document.getElementById("span5").innerHTML = "手机号为1开头的11位数字";
				return false;
			} else {
				document.getElementById("span5").innerHTML = "<img src='js/img/ok.png' alt='OK' style='width:20px;'>";
			}
			alert("注册成功！");
			return true;
		}
	</script>
<body>
	<form action="success.html" onsubmit="return check()">
		输入姓名：<input type="text" id="username"><span id="span1"></span><br>
		输入密码：<input type="password" id="password"><span id="span2"></span><br>
		确认密码：<input type="password" id="confirmPassword"><span id="span3"></span><br>
		确认年龄：<input type="text" id="age"><span id="span4"></span><br>
		手机号码：<input type="text" id="mobilephone"><span id="span5"></span><br>
		<input type="submit" value="注册">
	</form>
</body>
</html>
